<template>
  <div class="drink" v-show="curPageShow">
    <div class="title">
        <div class="l">
            <img src="../assets/img/dot_lt.png" alt="">
            <img src="../assets/img/dot_lb.png" alt="">
        </div>
        <div class="m">
            <img src="../assets/img/success_top_text.png" alt="">
        </div>
        <div class="r">
            <img src="../assets/img/dot_rt.png" alt="">
            <img src="../assets/img/dot_rb.png" alt="">
        </div>
    </div>

    
    <div class="container">
        <img :src="activeDrink.success.img" alt="">
    </div>


    <div class="complete_button">
        <img class="animated tada" 
            src="../assets/img/btn_discount.png" 
            alt="" @click="getDiscount">
        <img class="text" src="../assets/img/success_bottom_text.png" alt="">
    </div>

    <div class="inputPhoneNo" v-show="inputShow">
        <div class="inputBox">
            <img src="../assets/img/input.png" alt="">
            <input type="text" v-model="phoneNo">
            <button @click="commitPhone">确认提交</button>
        </div>
    </div>
  </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    import preLoadImg from '../mixins/preloadImg.js'
    export default {
        name:'success',
        mixins:[preLoadImg],
        data(){
            return{
                inputShow:false,
               phoneNo:'' 
            }
        },
        computed:{
            ...mapGetters(['activeDrink'])
        },
        methods:{
            getDiscount(){
                // this.inputShow=true
                 _hmt.push(['_trackEvent', '领取优惠券', 'click', '领取优惠券'])
                window.location='http://coupon.m.jd.com/coupons/show.action?key=a517061bd1c94742b08f6d26b43344c5&roleId=7493813&to=pro.m.jd.com/mall/active/49rzQ3Z1zhJb2vwVeUNWrfSktGT4/index.html'
            },
            commitPhone(){
                this.inputShow=false
                this.$store.dispatch('switchPage','home')
            }

        },
        mounted(){
            this.preLoadImg()
            setTimeout(()=>{
                this.$store.dispatch('bgMusicPlayToggle',true);
                document.getElementById('bg_music').play()
            }, 2000);
        }

    }
</script>

<style scoped lang="scss">
    .drink{
        position:relative;
        width:100%;
        height:100%;
        background-image:url('../assets/img/empty.png');
        background-repeat:no-repeat;
        background-size:100% 100% ;
        background-attachment: fixed;

        .base_title{
            width:100%;
            text-align:center;
            padding:10px 0;
            img{width:60%;}
        }

        .container{
            $width:45%;
            position: absolute;
            top:20%;
            left:50%;
            margin-left:-$width/2;
            width:$width;
            img{width:100%;}
        }
        .title{
            $width:85%;
            position: absolute;
            top:5%;
            left:50%;
            margin-left:-$width/2;
            // margin-top:-20px;
            width: $width;
            height: 40px; 
            display: flex;
            animation-iteration-count: 1;
            animation-duration:2s;
            animation-delay:1s;


            .l,.r{
                display: flex;
                flex-direction: column;
                animation-iteration-count: infinite;
                animation-duration:2s;
                animation-delay:2s;

            }
            img{
                width:100%;
                height:100%;
            }
            .l>img,.r>img{height:40%;}
        }
        .complete_button {
            $width:40%;
            position: absolute;
            bottom:8%;
            left:50%;
            margin-left:-$width/2;
            margin-top:-20px;
            width: $width;
            height: 50px;
            // text-align: center;

            img {
                width: 80%;
                height: 70%;
                margin-left:12%;
                animation-iteration-count: infinite;
                animation-duration:2s;
            }
            .text{
                margin:0;
                width:100%;
                height:30%;
            }
        }

        .inputPhoneNo{
            position: absolute;
            top: 0;
            width:100%;
            height:100%;
            background-color:rgba(0,0,0,.5);

            .inputBox{
                position: fixed;
                top:35%;
                left:20%;
                width:60%;
                height:30%;
                background-color:#fff;
                border-radius:5px;
                img{width:100%;}

                input{
                    position: fixed;
                    top:35%;
                    left:22%;
                    width:50%;
                    height:8%;
                    margin-top:14%;
                    text-indent: 14px;
                    background:transparent;
                    outline: medium;
                    border:none;
                }
                button{
                    position: absolute;
                    bottom:18%;
                    left:25%;
                    width:50%;
                    height:30px;
                    background:transparent;
                    border:none;
                    color:transparent;
                    
                }
            }

        }
    }
    //  #shake_music{display: none;}
</style>
